<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <style>
      body{
        display: flex;
      }
      .chart{
        width: 50%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="chart" id="main"></div>
    <div class="chart"  id="main2"></div>
    <script src="./fixEcharts.js"></script>
    <script>
      const test = [
        {
          type:"line",
          name: '邮件营销',
          data: [800, 1002, 780, 801, 790, 720, 800],
        },
        {
          type:"line",
          name: '联盟广告',
          data: [770, 1082, 790, 901, 790, 790, 799],
        },
        {
          type:"line",
          name: '视频广告',
          data: [820, 2002, 1080, 1001, 990, 920, 900],
        },
        {
          type:"line",
          name: '线下推广',
          data: [620, 1202, 480, 321, 1231, 673, 1000],
        },
      ];
      const test2 = [
        {
          type:"bar",
          name: '邮件营销',
          data: [800, 1002, 780, 801, 790, 720, 800],
        },
        {
          type:"bar",
          name: '联盟广告',
          data: [770, 1082, 790, 901, 790, 790, 799],
        },
        {
          type:"bar",
          name: '视频广告',
          data: [820, 2002, 1080, 1001, 990, 920, 900],
        },
        {
          type:"bar",
          name: '线下推广',
          data: [620, 1202, 480, 321, 1231, 673, 1000],
        },
      ];
      const fixTest =  fixEchartsLabel('line',test);
      const fixTest2 =  fixEchartsLabel('line',test2);
      var myChart = echarts.init(document.getElementById('main'));
      const option = {
        title: {
          text: "折线图标签防遮挡",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: fixTest,
      };
      myChart.setOption(option);
      var myChart2 = echarts.init(document.getElementById('main2'));
      const option2 = {
        title: {
          text: "柱状图标签防遮挡",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: fixTest2,
      };
      myChart2.setOption(option2);
      window.addEventListener("resize", ()=>{
        myChart.resize();
        myChart2.resize();
      });
    </script>
  </body>
</html>
